<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./drag.js"></script>
  </head>
  <style>
    .ball {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background-color: #beceeb;
      position: absolute;
    }
    .ball + .ball {
      margin-left: 200px;
    }
    .target {
      filter: url("#goo");
    }
  </style>
  <body>
    <svg width="0" height="0" style="position:absolute;">
      <defs>
        <filter id="goo">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
          <feColorMatrix
            in="blur"
            mode="matrix"
            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
            result="goo"
          />
          <feComposite in="SourceGraphic" in2="goo" operator="atop" />
        </filter>
      </defs>
    </svg>
    <div class="target">
      <i id="ball1" class="ball"></i>
      <i id="ball2" class="ball"></i>
    </div>
  </body>
  <script>
    var ball2 = document.getElementById('ball2');
    startDrag(ball2, ball2);
  </script>
</html>
